// web/src/app/(employee)/_components/hot-employee.tsx
import React from 'react';
import Link from "next/link";
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {db} from "@/lib/db";
import {formatPrice} from "@/lib/format";
import Preview from "@/components/learn/preview";


const HotEmployee = async () => {
    // 获取数据库随机几个职位
    const employees = await db.employee.findMany({
        take: 10,
        orderBy: {
            company: {
                creationTime: 'desc'
            }
        },
        include: {city: true}
    })

    return (
        <>
            <h1 className={`text-3xl text-center font-semibold m-4`}>热门职位</h1>
            <div className={`flex-wrap flex flex-row w-full gap-x-6 gap-y-4 justify-center items-center`}>
                {employees && employees.map(e => (
                    <Link className={`w-[17%] h-56`} href={`/employee/${e.id}`} key={e.id}>
                        <Card className={`hover:shadow-lg hover:scale-105 transition-all duration-200
                         active:shadow-none active:scale-100 bg-sky-200/30 h-56`}>
                            <CardHeader>
                                <CardTitle className={`flex flex-row items-center`}>
                                    <span className={`truncate`}>
                                        {e.name}
                                    </span>
                                </CardTitle>
                            </CardHeader>
                            <CardContent className={`h-28`}>
                                <CardDescription className={`text-wrap max-h-28 max-w-[12vw] truncate line-clamp-[5]`}>
                                    <Preview value={e.description}/>
                                </CardDescription>
                            </CardContent>
                            <CardFooter className={`flex justify-between flex-row items-center gap-x-2`}>
                                <span>
                                    {e.city.name}
                                </span>
                                <span>
                                    工资: {formatPrice(e.salary)}
                                </span>
                            </CardFooter>
                        </Card>
                    </Link>
                ))}
            </div>
        </>
    );
};

export default HotEmployee;